<template lang="html">
  <div class="pt-goods" v-if="details">

    <!-- banner图 -->
    <Swiper :details="details" />

    <div class="nums-bar">
      <div class="nb-left">
        <div class="prices">
          <div class="present-price">
            <span><em>￥</em>{{ details.pt_price }}</span>
          </div>
          <div class="purchase-price">
            单买价 <span>¥{{ details.price }}</span>
          </div>
        </div>
        <div class="pnum">
          <span class="tag">百人团</span>
          <span class="nums">已拼{{ details.pt_success }}件</span>
        </div>
      </div>
      <div class="dates">
        <div class="text">
          距离结束还剩
        </div>
        <div class="date-nums">
          <countdown :time="new Date(details.end_time) - new Date()">
            <template slot-scope="props">
              <div v-html="CountdownTime(props)"></div>
            </template>
          </countdown>
        </div>
      </div>
    </div>

    <div class="title-content">
      <span class="free-shipping"><img class="max" src="/static/pingtuan/goods/details_label_mail@2x.png"></span>
      <span class="title">{{ details.ptgoods_name }}</span>
      <div class="describe">
        {{ details.description }}
      </div>
    </div>

    <!-- 加入团   -->
    <Joins ref="Joins" @clickShowPtJoin="clickShowPtJoin" :list="details" @clickShowPtState="clickShowPtState" :showHead="true" />

    <!-- 拼团规则 -->
    <Rules />

      <!-- <div class="group start-address">
        <div class="group-head">
          <span class="group-title">
            <em>发货</em> 广东 广州 | 邮费：0.00
          </span>
        </div>
      </div> -->

      <div class="group group-cell">
        <div class="group-head" @click="selectSpec">
          <span class="group-title">
            <em>{{ isSelectSpec?'已选':'默认规格' }}</em> {{ specActive.norm_name }}
          </span>
          <!-- <span class="group-more">
            <img  class="max" src="/static/pingtuan/goods/details_icon_arrows@2x.png">
          </span> -->
        </div>
        <!-- <div class="group-head">
          <span class="group-title">
            <em>配送</em> 至 广州市荔湾区沙面流花街道白云...
          </span>
          <span class="group-more">
            <img  class="max" src="/static/pingtuan/goods/details_icon_arrows@2x.png">
          </span>
        </div> -->
        <div class="group-head">
          <ul class="group-tips-list">
            <li>
              支持7天无忧退换货
            </li>
            <li>
              48小时快速退款
            </li>
            <li>
              满88元免邮费
            </li>
            <li>
              国内部分地区不配送
            </li>
          </ul>
          <span class="group-more">
            <img  class="max" src="/static/pingtuan/goods/details_icon_arrows@2x.png">
          </span>
        </div>
      </div>

      <!-- 用户评论 -->
      <Comment :comments="details.pt_goodscomment" />

      <div class="fix-btns">
        <div class="btn btn-alone" @click="joinGroupBuyAlone">
          <div class="price">
            ￥<span>{{ specActive.price }}</span>
          </div>
          <div class="text">
            单独购买
          </div>
        </div>
        <div class="btn btn-open" @click="joinPt">
          <div class="price">
            ￥<span>{{ specActive.pt_price }}</span>
          </div>
          <div class="text">
            {{ $route.query.pt_code?'我要参团':'我要开团' }}
          </div>
        </div>
      </div>

      <!-- 弹框 显示拼团人列表 -->
      <div class="mask" v-if="showColleagues">
        <div class="mask-bg" @click="showColleagues = false"></div>
        <div class="mask-main">
          <div class="mask-close" @click="showColleagues = false">
            <img class="max" src="/static/pingtuan/goods/details_icon_close@2x.png">
          </div>
          <h3 class="mask-title tcenter">
            参与 <span class="font-mcolor">{{ selectPtListItem.user_nickname }}</span> 的团
          </h3>
          <p class="tcenter">
            还差<span class="font-mcolor">{{ selectPtListItem.pt_number }}</span>人，
            <span class="date-nums date-pt-list">
              <countdown :time="new Date(selectPtListItem.end_time) - new Date()">
                <template slot-scope="props">
                  <span v-html="CountdownTime(props)"></span>
                </template>
              </countdown>
            </span>
            后结束
          </p>
          <ul class="avatars">
            <li v-for="i in selectPtListItem.pt_user_list"><img class="max" :src="i"></li>
            <li v-for="(i, idx) in selectPtListItem.pt_number"></li>
          </ul>
          <div class="btn-submit" @click="clickJoinPt()">
            我也要参团
          </div>
        </div>
      </div>

      <!-- 弹框 拼团已结束 -->
      <div class="mask mask-pt-end" v-if="showPtEnd">
        <div class="mask-bg" @click="showPtEnd = false"></div>
        <div class="mask-main">
          <h3 class="mask-title tcenter">
            哎呀，晚了一步，此团已结束
          </h3>
          <p class="tcenter">
            请重新参团或者直接开团
          </p>
          <div class="btn-submit" @click="showPtEnd = false">
            我知道了
          </div>
        </div>
      </div>

        <!-- 弹框 可加入拼团列表 -->
        <div class="mask mask-pt-join" v-if="showPtJoin">
          <div class="mask-bg" @click="showPtJoin = false"></div>
          <div class="mask-main">
            <div class="mask-close-x" @click="showPtJoin = false">
              ×
            </div>
            <h3 class="mask-title tcenter">
              等待成团
            </h3>
            <Joins @clickShowPtState="clickShowPtState" :list="details" :showHead="false" />
          </div>
        </div>


      <!-- 弹框 分享图片 -->
      <div class="mask" v-if="showPtShare">
        <div class="mask-bg" @click="showPtShare = false"></div>
        <div class="mask-main">
          <div class="mask-close-x" @click="showPtShare = false">
            ×
          </div>
          <div class="btn-submit" @click="showPtShare = false">
            保存并分享给好友
          </div>
        </div>
      </div>


      <!-- 弹窗 规格 -->
      <div
        class="mini-win flex-column-end"
        :class="{'hidden':isCloseMineWin}"
        id="mini-win"
        @click.self="fnCloseMiniWin()"
      >
        <!-- 规格弹窗 -->
        <div
          class="minibox-specificationbox"
          :class="{'hidden':isCloseSpecificationbox}"
          id="minibox-specificationbox"
        >
          <!-- 第一层 -->
          <div class="ms-top flex-row-between">
            <img
              v-if="details.pt_slideshow && details.pt_slideshow.length"
              class="ms-goods-img"
              :src="details.pt_slideshow[0].picture"
            />
            <div class="flex-num-one specMain ms-top-center">
              <h3>{{ details.ptgoods_name }}</h3>
              <p>{{ details.description }}</p>
              <div class="ms-pricebox flex-row-start theme-color">
                <template v-if="details.pt_specification.length">
                  <span id="newprice" v-if="isAlone">￥{{details ? specActive.price : 0}}</span>
                  <span id="newprice" v-else>￥{{details ? specActive.pt_price : 0}}</span>
                </template>
              </div>
            </div>
            <!-- 选择规格 -->
            <div class="pt-spec">

            </div>
            <!-- 关闭弹窗 -->
            <img class="ms-closewin" src="/static/pingtuan/goods/icon_close.png" @click="fnCloseMiniWin()">
          </div>
          <!-- 第二层 -->
          <div class="spec-box">
            <ul class="spec-box" v-if="details.pt_specification && details.pt_specification.length">
              <li>
                请选择
                <div class="spec-box__info clearfix">
                  <span
                    @click="selectStandard(cel)" :class="specActive.norm_name == cel.norm_name?'standActive':''" v-for="(cel, celIndex) in details.pt_specification"
                    :key="celIndex">
                    {{cel.norm_name}}
                  </span>
                </div>
              </li>
            </ul>
          </div>
          <div class="ms-center flex-row-between">
            <div class="ms-buynum-text">购买数量</div>
            <div class="pos-relative">
              <img src="/static/pingtuan/goods/but_subtract_usable.png" class="ms-minnum ms-icon pos-absolute" @click="fnMinNum()">
              <input type="number" class="ms-input" v-model="buyNumber" />
              <img src="/static/pingtuan/goods/but_plus_usable.png" class="ms-addnum ms-icon pos-absolute" @click="fnAddNum()">
            </div>
          </div>
          <!-- 按钮 -->
          <div class="submit-btn flex-column-center theme-background" @click="fnSubmit()">确定</div>
        </div>

        <!-- 服务 -->
        <div
          class="minibox-servicebox"
          :class="{'hidden':isCloseServicebox} "
          id="minibox-servicebox"
        >
          <p class="address-tit" tapmode onclick="fnOpenSerLayer(false,this)" id="serviceLayer2">服务</p>
          <ul class="ser-li" v-if="serviceList && serviceList.length">
            <li
              class="item flex-display flex-display-column"
              v-for="(cel, celIndex) in serviceList"
              :key="celIndex"
            >
              <span>{{cel.title}}</span>
              <p>{{cel.content}}</p>
            </li>
          </ul>
        </div>
      </div>

    </div>

</template>

<script>
import { ptGoodsInfoDetail, joinGroupBuy, isJoinGroupBuy, ptStartDetail, joinGroupBuyAlone } from '@/api/pingtuan'
import Swiper from './components/Swiper'
import Joins from './components/Joins'
import Rules from './components/Rules'
import Comment from './components/Comment'
import { Toast } from "mint-ui";

export default {
  components: {
    Swiper,
    Joins,
    Rules,
    Comment,
    Toast,
  },
  data() {
    return {
      details: null,
      goodsId: this.getUrlParams('goodsId'),
      showColleagues: false,
      showPtEnd: false,
      showPtJoin: false,
      showPtShare: false,

      // 是否关闭大弹窗
      isCloseMineWin: true,
      // 是否关闭规格弹窗
      isCloseSpecificationbox: true,
      // 是否关闭服务弹窗
      isCloseServicebox: true,
      count: 0,
      goods_standard: "", // 规格名称
      specActive: null,
      buyNumber: 1,
      detailsTime: null,
      isSelectSpec: false,
      isJoinPt: false,
      isSelectSpecPop: false,
      selectPtListItem: null,
      isAlone: false,
    }
  },
  created() {
    this.ptGoodsInfoDetail();

  },
  methods: {
    joinGroupBuyAlone() {
      this.isAlone = true;
      this.fnOpenSpecificationbox();
    },
    // 点击加入拼团
    clickJoinPt() {
      this.isAlone = false;
      isJoinGroupBuy({
        get_type: 'join', // join
        goods_id: this.specActive.id,
        uid: this.getUserInfo().id,
        pt_code: this.selectPtListItem.id,
      }).then(res=>{
        if(res.code == 0){
          this.$router.push({
            path: "/pingtuan/define",
            query: {
              uid: this.getUserInfo().id,
              get_type: 'join',
              goods_id: this.goodsId,
              pt_code: this.selectPtListItem.id,
              count: this.buyNumber,
              specId: this.specActive.id
            }
          });
        }else{
          Toast(res.msg)
        }
      })
    },
    // 获取拼团商品详情
    ptGoodsInfoDetail() {
      ptGoodsInfoDetail(this.goodsId).then(res=>{
        this.print(res.data)
        this.details = res.data;
        this.specActive = this.details.pt_specification[0];
        this.selectPtListItem = this.details.pt_specification[0];
        this.isJoinGroupBuys();
      })
    },

    // 拼团详情
    ptStartDetail(state, item) {
      this.showPtJoin = false
      this.showColleagues = state
      this.selectPtListItem = item;
    },
    // 是否有资格参团
    isJoinGroupBuys() {
      isJoinGroupBuy({
        get_type: 'open', // join
        goods_id: this.specActive.id,
        uid: this.getUserInfo().id,
        pt_code: '',
      }).then(res=>{
        this.isJoinPt = res;
      })
    },
    // 选择规格
    selectSpec() {
      // this.fnOpenSpecificationbox();
      // this.isSelectSpecPop = true;
    },
    // 显示更多的拼团
    clickShowPtJoin(state) {
      this.showPtJoin = state
    },
    // 列表点击加入拼团
    clickShowPtState(state, item) {
      this.ptStartDetail(state, item);
    },

    // 点击加入
    joinPt() {
      if(this.isJoinPt.code == 0){
        this.fnOpenSpecificationbox();
      }else{
        Toast(this.isJoinPt.msg)
      }

    },
    // 关闭弹窗
    fnCloseMiniWin() {
      this.isCloseMineWin = true;
      this.isCloseSpecificationbox = true;
      this.isCloseServicebox = true;
      this.isHiddenDetail = false;
    },

    // 打开规格弹窗
    fnOpenSpecificationbox() {
      this.isCloseMineWin = false;
      this.isCloseSpecificationbox = false;
      this.isHiddenDetail = true;
    },
    // 数量减少
    fnMinNum() {
      if (this.buyNumber <= 1) {
        return;
      }
      this.buyNumber--;
    },
    // 数量增加
    fnAddNum() {
      if (this.buyNumber >= this.details.per_limit) {
        Toast("购买最大数量" + this.buyNumber + "件");
        return;
      }
      this.buyNumber++;
    },
    // 确定按钮
    fnSubmit() {
      if(!this.isSelectSpecPop){
        this.$router.push({
          path: "/pingtuan/define",
          query: {
            uid: this.getUserInfo().id,
            get_type: this.isAlone?'buy':'open',
            goods_id: this.goodsId,
            pt_code: this.$route.query.pt_code,
            count: this.buyNumber,
            specId: this.specActive.id
          }
        });
      }else{
        this.isCloseMineWin = true;
        this.isCloseSpecificationbox = true;
        this.isCloseServicebox = true;
        this.isHiddenDetail = false;
      }

    },
    // 选择规格
    selectStandard(item) {
      this.specActive = item;
      console.log(this.specActive)
      this.isSelectSpec = true;
      for (var idx in this.details.pt_specification) {
        if(this.specActive.norm_name == this.details.pt_specification[idx].norm_name){
          this.details.pt_specification[idx].select = true;
        }
      }
    },
  }
}
</script>
<style lang="scss">
@import '@/styles/pingtuan/common.scss';
</style>

<style lang="scss" scoped>
@import '@/styles/pingtuan/goods.scss';
.specMain{
  h3{
    font-size: .44rem;
    padding-bottom: .2rem;
  }
  p{
    padding-bottom: .2rem;
    color: #888;
  }
}
</style>
